// 配置路由相关信息

// 1 导入路由
import Vue from "vue"
import VueRouter from "vue-router"

// 引入组件
import home from '@/components/home/home.vue'
import tab from '@/components/tab/tab.vue' // tab切换
import utils from '@/components/utils/utils.vue' // 公共方法
import flex from '@/components/flex/flex.vue' // flex 布局
import time from '@/components/time/time.vue' // 时间判断
import Form from '@/components/form/form.vue' // form 表单
import object from '@/components/object/index.vue' // object 应用
// Echarts 相关
import echarts from '@/components/echarts/echarts.vue'
import echartsDemo from '@/components/echarts/echartsDemo/index.vue' // Echarts 组件
import echartsAnimation from '@/components/echarts/echartsAnimation/echarts.vue' // Echarts 动画
import pie from '@/components/echarts/pie/pie.vue' // 立体饼图
import liquidfill from '@/components/echarts/liquidfill/liquidfill.vue' // 水球图
import formE from '@/components/echarts/form/form.vue'

import scroll from '@/components/scroll/scroll.vue' // 滚动组件
import canvas from '@/components/canvas/canvas.vue' // canvas
// game 相关
import game from '@/components/game/game.vue'
import canvasWZQ from '@/components/game/canvasWZQ/index.vue' // 五子棋
import judge from '@/components/game/judgeDemo/judge.vue' // 计算组件
import tetris from '@/components/game/tetris/tetris.vue' // 俄罗斯方块
import study from '@/components/game/study/index.vue' // 学习习题
// game 相关
import draggable from '@/components/draggable/index.vue'
import draggable1 from '@/components/draggable/draggable1/index.vue' // 基本用法
import draggable2 from '@/components/draggable/draggable2/index.vue' // 基本用法

// 2 使用路由
Vue.use(VueRouter)

// 3 创建路由对象
const routes = [
  // 页面默认展示 首页 页面
  { path: '/', redirect: '/home' },
  // 配置组件和路由的映射关系
  { path: '/home', component: home, name: '首页' },
  { path: '/tab', component: tab, name: 'tab切换' },
  { path: '/utils', component: utils, name: '公共方法' },
  { path: '/flex', component: flex, name: 'flex 布局' },
  { path: '/time', component: time, name: '时间判断' },
  { path: '/form', component: Form, name: 'form 表单', meta: { keepAlive: true } },
  { path: '/object', component: object, name: 'object 应用' },

  {
    path: '/echarts',
    name: 'Echarts 相关',
    component: echarts,
    children: [
      { path: 'echartsDemo', component: echartsDemo, name: 'Echarts 组件' },
      { path: 'echartsAnimation', component: echartsAnimation, name: 'Echarts 动画' },
      { path: 'pie', component: pie, name: '立体饼图' },
      { path: 'liquidfill', component: liquidfill, name: '水球图' },
      { path: 'form', component: formE, name: 'formE', meta: { keepAlive: true } },
    ]
  },

  { path: '/scroll', component: scroll, name: '滚动组件' },
  { path: '/canvas', component: canvas, name: 'canvas' },

  {
    path: '/game',
    name: 'Game 相关',
    component: game,
    children: [
      { path: 'canvasWZQ', component: canvasWZQ, name: '五子棋' },
      { path: 'judge', component: judge, name: '计算组件' },
      { path: 'tetris', component: tetris, name: '俄罗斯方块' },
      { path: 'study', component: study, name: '学习习题' }
    ]
  },

  {
    path: '/draggable',
    name: 'Draggable 相关',
    component: draggable,
    children: [
      { path: 'draggable1', component: draggable1, name: '基本用法' },
      { path: 'draggable2', component: draggable2, name: '表格拖拽' },
    ]
  },

]
const router = new VueRouter({
  mode: 'history',
  routes
})

// 4 将 router挂载到 vue 实例上
export default router